﻿<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>split彩色字效果</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            padding:20px;
            width:500px;
            height:300px;
            font-size: 20px;
            color: #fff;
            border: 1px solid #ccc;
        }
        .wrap span{
          padding:10px;
        }
        .input-text,.input-btn{
            height:40px;
            line-height: 40px;;
        }
        .input-btn{
            padding:0 30px;
        }
    </style>
</head>
<body>
<div class="wrap" id="j_wrap1">

</div>
<input type="text" name="" class="input-text" id="j_text"/>
<input type="submit" name="" value="按钮" class="input-btn" id="j_btn"/>
<script type="text/javascript">

    window.onload=function(){
        var oWrap = document.getElementById("j_wrap1");
        var oBtn = document.getElementById("j_btn");
        var oText = document.getElementById("j_text");
        var arrColor = ["#057ccc","#f0ad4e","#d0e9c6","#a61717"];

        oBtn.onclick  =function (){
            var str = oText.value;
            var arrText = str.split("");
            for(var i=0;i<arrText.length;i++){
                oWrap.innerHTML += '<span style="background: '+arrColor[i%arrColor.length]+';">'+arrText[i]+'</span>';
            }
            oText.value = "";
        }
    }
</script>
</body>

</html>
